﻿<!DOCTYPE html>
<html>
<head>
    <title>源栈欢迎您！</title>
    <style>
        #propagate {
            padding: 30px;
            border: 1px solid;
        }

            #propagate > p {
                background-color: blue;
                border: 1px dashed;
            }
    </style>
</head>
<body>
    <div id="propagate">
        <p>
            源栈欢迎您
        </p>
    </div>
    <script>
        var father = document.getElementById('propagate'),
            child = father.children[0];
        father.addEventListener('click', function () {
            console.log(this == event.currentTarget);
            console.log('event.target' + event.target);
            console.log('event.currentTarget' + event.currentTarget);
            console.log('event handler on father');
            console.log('  ');
        }, false);/*bubble*/
        child.addEventListener('click', function () {
            console.log(this == event.currentTarget);
            console.log('event.target' + event.target);
            console.log('event.currentTarget' + event.currentTarget);
            console.log(this);
            console.log('event handler on child');
            console.log('  ');
        }, true);/*capture*/

    </script>



</body>
</html>